<template>
    <div class="root">
        <navs titles="发现"></navs>
        <div class="container">
            <div class="cencontainer" @click="tofriendmoments">
                <div class="padc">
                    <div class="icon"><i class="fa fa-spinner fa-spin fa-lg"></i></div>
                    <div class="text">朋友圈</div>
                    <div class="pic">
                        <div class="head"><img src="../assets/img/normal.jpg" width="100%" height="100%" alt=""></div>
                        <div class="right fa fa-angle-right fa-2x"></div>
                    </div>
                </div>
            </div>
            <div class="cencontainer sec">
                <div class="padc">
                    <div class="icon"><i class="fa fa-gamepad fa-lg"></i></div>
                    <div class="text">小程序</div>
                    <div class="pic">
                        <div class="head col"></div>
                        <div class="right fa fa-angle-right fa-2x"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import navs from '../components/nav.vue'
export default {
    components:{
        navs
    },
    methods:{
        tofriendmoments(){
            this.$router.push('/friendsmoments')
        }
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .container{
        width: 100vw;
        height: 100%;
        // border: 1px solid #ccc;
        background-color: rgb(237, 237, 237);
        display: flex;
        flex-direction: column;
        align-items: center;
        // align-items: center;
    }
    .sec{
        margin-top: 5px;
    }
    .cencontainer{
        width: 100%;
        height: 50px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        .padc{
            width: 95vw;
            height: 100%;
            // border: 1px solid #ccc;
            display: flex;
            .icon{
                width: 40px;
                height: 50px;
                // background-color: #3498db;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .text{
                height: 50px;
                width: 30px;
                // background-color: #9b59b6;
                letter-spacing: 1px;
                flex-grow: 1;
                display: flex;
                align-items: center;
                padding-left: 8px;
            }
            .pic{
                width: 55px;
                height: 50px;
                // background-color: #2ecc71;
                display: flex;
                justify-content: center;
                align-items: center;
                .head{
                    height: 40px;
                    width: 40px;
                    // background-color: #2c3e50;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 3px;
                    // flex-grow: 1;
                }
                .col{
                    background-color: #fff;
                }
                .right{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: rgb(230, 230, 230);
                }
            }
        }
    }
</style>
